<template>
  <div class="page-containers">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="search-input">
          <el-form-item label="成长值变动时间：">
            <el-date-picker v-model="filters.startTime" type="datetime" placeholder="开始时间" ></el-date-picker>
            <span>-</span>
            <el-date-picker v-model="filters.endTime" type="datetime" placeholder="结束时间" ></el-date-picker>
          </el-form-item>
          <el-form-item label="变动方式：">
            <el-select v-model="filters.changeMode"  placeholder="全部" >
              <el-option label="下单赠送  " value="1"></el-option>
              <el-option label="注册赠送" value="2"></el-option>
              <el-option label="评价赠送" value="3"></el-option>
              <el-option label="充值赠送" value="4"></el-option>
              <el-option label="分享赠送" value="5"></el-option>
              <el-option label="点赞赠送" value="6"></el-option>
              <el-option label="晒单赠送" value="7"></el-option>
              <el-option label="收藏赠送" value="8"></el-option>
              <el-option label="参与活动赠送" value="9"></el-option>
              <el-option label="消费抵现" value="10"></el-option>
              <el-option label="兑换优惠券" value="11"></el-option>
              <el-option label="兑换红包" value="12"></el-option>
              <el-option label="兑换产品功能" value="13"></el-option>
              <el-option label="兑换付费内容" value="14"></el-option>
              <el-option label="退款返还" value="15"></el-option>
              <el-option label="取消评价返还" value="16"></el-option>
              <el-option label="取消点赞返还" value="17"></el-option>
              <el-option label="兑换抽奖活动" value="18"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="变动类型：">
            <el-select v-model="filters.changeTypes"  placeholder="全部" >
              <el-option label="成长值获取" value="1"></el-option>
              <el-option label="成长值消耗" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属商家/店铺：" label-width="124px">
            <el-input v-model="filters.integral" placeholder="请输入商家/店铺" clearable></el-input>
          </el-form-item>
        </el-row>

        <div class="w100 search-button">
          <el-form-item>
            <kt-button icon="el-icon-search" :label="'搜索'" type="primary" @click="findPage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="'重置'"  type="primary" @click="resetForm('filters')" />
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="toolbar" >
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table :height="350" :data="pageResult" :columns="filterColumns" @findPage="findPage" @selectionChange="selectionChange"
              :showBatchDelete="false" showDetailOperation :showDeleteOperation="false" :showPushOperation="false"
              :showOperation="false"
              :showSelection="false"
              ref="CyTable">
    </cy-table>
  </div>
</template>

<script>
  import {exportExcel} from "@/utils/excel";
  import CyTable from "@/views/Core/JicTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import {validatePhone,validateContacts,isEmail,isNumber} from '@/utils/validate'
  import XLSX from "xlsx";
  export default {
    components: {
      CyTable,
      KtButton,
      TableColumnFilterDialog,
    },
    props: {
      userId: {
        // 用户id
        type: String,
        default: null
      },
    },

    data() {
      return {

        size: "small",
        filters: {
          thirdUserId:this.$route.params.thirdUserId,
          id:this.$route.params.id,
        },
        columns:[
          {prop: "changeType", label: "成长值变动方式", minWidth: 130,formatter: this.changeModeFormatter},
          {prop: "addOrReduce", label: "变动类型", minWidth: 120,formatter: this.changeTypesFormatter},
          {prop: "growthRuleVal", label: "变动成长值", minWidth: 120},
          {prop: "deptType", label: "所属平台", minWidth: 120,formatter: this.integralTypeFormatter},
          {prop: "msName", label: "所属商家/店铺", minWidth: 120},
          {prop: "freezeIntegral", label: "成长值余额", minWidth: 120},
          {prop: "createTime", label: "成长值变动时间", minWidth: 120},
        ],
        filterColumns: [],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        deptOption:[]
      };
    },
    methods: {
      // 获取分页数据
      findPage: function(data) {
        if(data != null && data.start != null){
          if(data.start != null){
            this.pageRequest.pageNum = data.start;
          }
          if(data.limit != null){
            this.pageRequest.pageSize = data.limit;
          }
        }
        let this_ = this;
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = this.pageRequest.pageNum;
        this_.filters.limit = this.pageRequest.pageSize;
        this_.filters.memberId = this.userId;
        this.utils.request.getMemberLogList(this_.filters, function (res) {
          if (res.data == null) {
            res.data = [];
            res.totle = 0;
          }else{
            this_.$refs.CyTable.findPage({content:res.data.rows,total:res.data.total});
          }
        });
      },

      integralTypeFormatter: function(row, column, cellValue, index){
        if(cellValue == 1){
          return '消费积分';
        }else if(cellValue == 2){
          return '任务积分';
        }
        else if(cellValue==3){
          return '活动积分';
        }
      },


      changeTypesFormatter : function(row, column, cellValue, index){
        if(cellValue==1){
          return '成长值获取'
        }else if(cellValue==2){
          return ' 成长值消耗'}
      },

      changeModeFormatter: function(row, column, cellValue, index){
        if(cellValue==1){
          return '下单赠送'
        }else if(cellValue==2){
          return ' 注册赠送'
        }else if(cellValue==3){
          return ' 评价赠送'
        }else if(cellValue==4){
          return ' 充值赠送'
        }else if(cellValue==5){
          return ' 分享赠送'
        }else if(cellValue==6){
          return ' 点赞赠送'
        }else if(cellValue==7){
          return ' 晒单赠送'
        }else if(cellValue==8){
          return ' 收藏赠送'
        }else if(cellValue==8){
          return ' 收藏赠送'
        }else if(cellValue==8){
          return ' 收藏赠送'
        }else if(cellValue==9){
          return ' 参与活动赠送'
        }else if(cellValue==10){
          return ' 消费抵现'
        }else if(cellValue==11){
          return ' 兑换优惠券'
        }else if(cellValue==12){
          return ' 兑换红包'
        }else if(cellValue==13){
          return ' 兑换产品功能'
        }else if(cellValue==14){
          return ' 兑换付费内容'
        }else if(cellValue==15){
          return ' 退款返还'
        }else if(cellValue==16){
          return ' 取消评价返还'
        }else if(cellValue==17){
          return ' 取消点赞返还'
        }else if(cellValue==18){
          return ' 兑换抽奖活动'
        }
      },
      //获取选择框数据
      selectionChange(val) {
        this.checked = val.selections;
      },

      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property]);
      },

      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
          this.filters={};
          this.findPage(null);
        }
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true);
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns;
        this.$refs.tableColumnFilterDialog.setDialogVisible(false);
      },
      // 处理表格列过滤显示
      initColumns: function () {
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      },
    },
    mounted() {
      this.initColumns()

    }
  };
</script>

<style lang="scss" scoped>
  .reset {
    background-color: #fff;
    color: #2F4554;
  }
  .noMargin{
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    .el-button{
      height: 30px !important;
    }
  }
  .fa{
    padding-right: 10px !important
  }
</style>
